#plugin-list-header
  clearfix()
  margin: 40px 0

#plugin-list-title
  font-family: font-title
  font-size: 36px
  font-weight: 300
  line-height: 1
  float: left

#plugin-list-count
  color: color-gray
  padding-top: 1em
  text-align: right
  @media mq-normal
    float: right
    line-height: 40px
    padding-top: 0
    padding-right: 15px

#plugin-search-input
  font-size: 16px
  font-family: inherit
  -webkit-appearance: none
  border: 1px solid color-border
  padding: 10px 10px
  width: 100%
  margin-top: 25px
  @media mq-normal
    float: right
    width: 50%
    margin-top: 0

#plugin-list
  margin: 40px -20px
  display: flex
  flex-flow: column
  @media mq-tablet
    flex-flow: row wrap

.plugin
  display: none
  padding: 20px
  @media mq-tablet
    flex: 0 0 50%
  @media mq-normal
    flex: 0 0 (100 / 3)%
  &.on
    display: block

.plugin-name
  font-family: font-title
  font-weight: bold
  color: color-link
  font-size: 20px
  text-decoration: none
  line-height: 1
  .fa-external-link
    font-size: 12px
    opacity: 0.7
  &:hover
    color: color-link-hover

.plugin-preview-wrap
  margin: 10px 0 10px 0

.plugin-preview-link
  font-family: font-title
  color: color-link
  font-size: 14px
  text-decoration: none
  line-height: 1
  .fa-external-link
    font-size: 12px
    opacity: 0.7
  &:hover
    color: color-link-hover


.plugin-desc
  line-height: line-height
  margin: 1em 0

.plugin-tag-list
  clearfix()
  line-height: 1.3

.plugin-tag
  color: color-gray
  font-size: 0.9em
  text-decoration: none
  float: left
  margin-right: 10px
  &:hover
    color: color-link-hover
  &:before
    content: "#"

.plugin-screenshot
  margin-bottom: 15px
  position: relative
  padding-top: (10 / 16 * 100)% // 16:10 ratio
  height: 0
  overflow: hidden
  &:hover
    .plugin-screenshot-mask
      opacity: 1
    .fa
      opacity: 1
      transform: scale(1)

.plugin-screenshot-img
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  transition: opacity 0.3s
  &.lazyload
  &.lazyloading
    opacity: 0
  &.lazyloaded
    opacity: 1

.plugin-screenshot-mask
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: rgba(0, 0, 0, 0.7)
  color: #fff
  text-align: center
  opacity: 0
  transition: 0.15s
  pointer-events: none
  .fa
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0
    margin: auto
    font-size: 50px
    width: @font-size
    height: @font-size
    opacity: 0
    transform: scale(6)
    transition: 0.2s
    transition-delay: 0.15s
    pointer-events: none
blockquote
    font-size: 0.8rem
    opacity: 0.7
    background: #fffee5
    padding: 0 10px 10px 20px
    position: relative
    border: 1px solid color-border
    border-left: 5px solid #ddd
  .note

    &.warn
      border-left-color: #ffe2ac
  .note-title
    margin: 0.7em 0
    display: block
    font-size: 1.2em
    font-weight: bold

